<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>骨医快线</title>
	<link rel="stylesheet" href="../../css/mui.plus.css" />
	<link href="../../css/mui.picker.min.css" rel="stylesheet" />
	<link href="../../css/mui.poppicker.css" rel="stylesheet" />
	<style>
		.mui-input-group .mui-input-row {
			height: 44px;
		}
		.mui-input-row label, .mui-input-row label ~ input {
			padding: 13px 15px;
			height: 44px;
		}
		.mui-table-view:after {
			height : 0;
		}
		.oe-mine .oe-btn-pick {
		    width: 100%;
		    height: 100%;
		    text-align: right;
		    background-color: #fff;
		}
	</style>	
</head>
<body>
	<header class="mui-bar mui-bar-nav pri-bar">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">个人信息</h1>
	</header>
	
	<div class="mui-content">
		
		<ul class="mui-table-view">
			 <li class="mui-table-view-cell">
			 	<span style="position: relative;top: 15px;">头像</span>
			 	<span class="mui-pull-right">
			 		<img id="user_head" src="../../images/dr_avatar.png" alt=""  class="mui-pull-right" style="width: 50px;height: 50px; border-radius: 100px;background-image: url(../../images/avatar-default.png);background-size: 100%;"/>
			 	</span>
			 </li>
		</ul>
		
		<form class="mui-input-group oe-mine" id="recordList">
    		
    		<div class="mui-input-row">
                <label>姓名</label>
                <input type="text" name="rec_name" placeholder="请填写" style="text-align: right;" value="加载中...">
            </div>
            <ul class="mui-table-view" >
            	<li class="mui-table-view-cell">
					<a>
						医院
						<span class="mui-pull-right">加载中...</span>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a>
						职称
						<span class="mui-pull-right">加载中...</span>
					</a>
				</li>
			</ul>
        
       	</form>
		
	</div>
	
	<script id="tmp-info" type="text/html">
		{{each data as v i}}
			<div class="mui-input-row">
                <label>姓名</label>
                <input type="text" name="dr_name" placeholder="请填写" style="text-align: right;" value="{{v.dr_name}}">
            </div>
            <div class="mui-input-row">
                <label class="oe-label-pick">医院</label>
                <button id="showHosBtn" name="dr_hospital" type="button" class="mui-btn oe-btn-pick">{{v.dr_hospital}}</button>
            </div>
            <div class="mui-input-row">
                <label class="oe-label-pick">职称</label>
                <button id="showPostBtn" name="dr_title" type="button" class="mui-btn oe-btn-pick" data-options='{"type":"date","beginYear":2016,"endYear":2020}'>{{v.dr_title}}</button>
            </div>
		{{/each}}
	</script>
	
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/lib/template.js"></script>
	<script src="../../js/mui.picker.js"></script>
	<script src="../../js/mui.poppicker.js"></script>
	<script src="../../data/city.data.js"></script>
    <script src="../../js/app.js"></script>
	<script>
		(function($,doc){
			var tmpData = {
				data : []
			};
			var recList = document.getElementById("recordList");
			
			var head = document.querySelector('#user_head');
	  				
	  		var userPicker = new $.PopPicker(),
				hosPicker  = new $.PopPicker(),
				cityPicker = new $.PopPicker({layer: 3});
				
			// 初始化职位列表
			userPicker.setData([{
				value: 'dr1',
				text: '主任医师'
			}, {
				value: 'dr2',
				text: '副主任医师'
			}, {
				value: 'dr3',
				text: '主治医师'
			}, {
				value: 'dr4',
				text: '住院医师'
			}]);
			
			cityPicker.setData(cityData);
			
	      	window.addEventListener('start', function(){
	      		reload();
	      	})
	      	
	      	$('.mui-content').on('tap', '#showPostBtn' ,function(){
	      		var btnPost = document.getElementById("showPostBtn");
	      		
				userPicker.show(function(items) {
					if(btnPost.innerHTML !== items[0].text){
	                	var preData = {};
	                	preData[btnPost.name] = items[0].text;
	                	preData.dr_id = app.storage.getUserId();
	                	app.net.post('doctors/update.json',preData,function(data){
	                		if(data && data.code == 100){
	                			app.storage.setUserInfo(data.data);
	                			$.toast('更新成功');
	                			
	                			btnPost.innerHTML = items[0].text;
								if(btnPost.innerHTML !== '加载中...' || '请选择'){
									btnPost.style.color = '#000';
								}
	                		}
	                	});
					}
					
					
					//返回 false 可以阻止选择框的关闭
					//return false;
				});
			});
			
			$('.mui-content').on('tap', '#showHosBtn', function(){
				cityPicker.show(function(items) {
					
					var data = {
						hos_province : items[0].text,
						hos_city : items[1].text,
						hos_district : items[2].text
					};
					
					app.net.get('c_hospital/get_all_list', data, function(data){
						if(data){
							var hosArray = [];
							var hosData = data.data || {};
							for(var i in hosData){
								var item = {
									value : hosData[i].hos_id,
									text  : hosData[i].hos_name
								};
								hosArray.push(item);
							}
							hosPicker.setData(hosArray);
							hosPicker.show(function(items){
								var btnHos = document.getElementById("showHosBtn");
								
								if(btnHos.innerHTML !== items[0].text){
									var preData = {};
				                	preData[btnHos.name] = items[0].text;
				                	preData.dr_id = app.storage.getUserId();
				                	
				                	app.net.post('doctors/update.json',preData,function(data){
				                		if(data && data.code == 100){
				                			app.storage.setUserInfo(data.data);
				                			$.toast('更新成功');
				                			
				                			btnHos.innerHTML = items[0].text;
											if(btnHos.innerHTML !== '加载中...' || '请选择'){
												btnHos.style.color = '#000';
											}
				                		}
									});
			                	}
							});
						}
					},'json');
				});
			})
	      	
	      	function reload(){
	      		app.net.get('doctors/show.json', {dr_id : app.storage.getUserId()}, function(data){
	      			if(data && data.code == 100){
						tmpData.data.push(data.data);
						var html = template('tmp-info', tmpData);
						recList.innerHTML = html;
						head.src = data.data.dr_avatar_src || '../../images/dr_avatar.png';
	      			}
	      		});
	      	}
	      	
	      	reload();
	      	
			$.init({
				
	      	});
	      	
			$.plusReady(function(){
	  			
	  			$('#recordList').on('change', 'input', function(){
	  				var key = this.name;
                	var value = this.value;
                	var preData = {};
                	preData[key] = value;
                	preData.dr_id = app.storage.getUserId();
                	app.net.post('doctors/update.json',preData,function(data){
                		if(data && data.code == 100){
                			app.storage.setUserInfo(data.data);
                			plus.nativeUI.toast('更新成功');
                		}
                	});
	  			});
	  			
	  			$('body').on('tap', '.mui-action-back', function(){
	  				var pages = plus.webview.all();
      				for(var i in pages){
						$.fire(pages[i], 'start', null);
					}
	  			});
	  			
			});
	      	
	      }(mui,document));
	</script>
</body>
</html>